<template>
	<view>
		<view class="class flex" v-if="list">
			<scroll-view scroll-y="true" class="nav">
				<view class="nav_item flex f-y-c f-x-c" @click="navAct = index,one_cate_id=item.value,cate_idval=''" :class="{ act: index == navAct }" v-for="(item, index) in list" :key="index">
					<view class="actLine" v-if="index == navAct"></view>
					<view class="text ellipsis t-c">{{ item.text }}</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="shop_list" @scrolltolower="more">
				<view class="box">
					<view class="shop_item" v-for="(val, key) in list[navAct].children" :key="key" @click="cate_idval = val.value">
						<view class="title" :class="{'current':cate_idval == val.value}">{{ val.text }}</view>
					</view>
				</view>
				
				<view class="list-box">
					<view class="" style="font-weight: bold;font-size: 30rpx;color: #333333;">我的行业</view>
					<view class="my-hy-box" v-for="(item,index) in myList">
						<view class="my-hy">
							<view class="" style="font-weight: 500;font-size: 24rpx;color: #999999;">一级行业</view>
							<view class="" style="font-weight: 500;font-size: 24rpx;color: #999999;padding-top: 16rpx;">二级行业</view>
						</view>
						<view class="my-hy">
							<view class="" style="font-weight: bold;font-size: 30rpx;color: #333333;">{{item.oneName}}</view>
							<view class="" style="font-weight: bold;font-size: 30rpx;color: #333333;padding-top: 16rpx;">{{item.cateName}}</view>
						</view>
					</view>
				</view>
		
				<view class="bot-box">
					<view class="btn" @click="save">确定</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navAct: 0,
				one_cate_id:'',//一级分类id
				cate_idval:'',//分类id
				list: '',
				
				page:1,
				myList:[],
				nodata:false
			}
		},
		onLoad() {
			this.getapplycate()
			this.getcate()
		},
		methods: {
			more() {
				this.page++
				this.getapplycate()
			},
			save(){
				// console.log('请选择一级分类：'+this.one_cate_id,'分类：'+this.cate_idval)
				// return
				if(!this.one_cate_id) return uni.$u.toast('请选择一级分类');
				if(!this.cate_idval) return uni.$u.toast('请选择分类');
				uni.$u.http.post('/applycate', {
					types:'add',
					one_cate_id:this.one_cate_id,
					cate_id:this.cate_idval
				}).then(res => {
					if (res.code == 1) {
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}
				}).catch((res) => {
							
				})
			},
			getcate(){
				uni.$u.http.post('/getcitycate ', {}).then(res => {
					if (res.code == 1) {
						this.list = res.data
						this.one_cate_id = this.list[0].value
					}
				}).catch((res) => {
							
				})
			},
			getapplycate() {
				if(this.nodata) return
				uni.$u.http.post('/applycate', {
					page:this.page
				}).then(res => {
					if (res.code == 1) {
						this.myList = this.myList.concat(res.data)
						if(res.data.lenth == 0){
							this.nodata = true
						}
					}
				}).catch((res) => {
			
				})
			},
		}
	}
</script>

<style lang="scss">
.class {
	.nav,
	.shop_list {
		height: calc(100vh - 90rpx);
		overflow: hidden;
		box-sizing: border-box;
		background-color: #FFF;
	}

	.nav {
		background: #f5f5f5;
		width: 216rpx;
		.nav_item {
			padding: 40rpx 0;
			font-size: 28rpx;
			font-weight: 400;
			color: #989898;

			.text {
				width: 190rpx;
			}

			.actLine {
				width: 8rpx;
				height: 28rpx;
				background: #febf4e;
				border-radius: 4rpx;
				margin-right: 15rpx;
			}

			&.act {
				font-size: 32rpx;
				font-weight: 400;
				color: #343434;
				background: #fff;

				.text {
					width: 160rpx;
				}
			}
		}
	}

	.shop_list {
		flex: 1;
		padding: 30rpx 40rpx;

		.box {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		.shop_item {
			margin-right: 46rpx;
			margin-bottom: 46rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			&:nth-child(3n + 3) {
				margin-right: 0rpx;
			}

			.cover {
				width: 120rpx;
				height: 120rpx;
			}

			.title {
				// width: 120rpx;
				// width: 142rpx;
				// height: 70rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
				padding: 17rpx 32rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				border: 1rpx solid #F0F0F0;
			}
			.current {
				border: 1rpx solid #febf4e;
			}

			font-size: 28rpx;
			font-weight: 400;
			color: #343434;
		}
	}
}

.list-box {
	
}
.my-hy-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	
	padding: 32rpx;
	background: #F5F5F5;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin-top: 24rpx;
	.my-hy {
		
	}
}

.bot-box {
	position: fixed;
	bottom: 20rpx;

	.text {
		width: 400rpx;
		// height: 126rpx;
		background: #f6f6f6;
		// margin: auto;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		font-size: 22rpx;
		padding: 32rpx;
		font-weight: 500;
		color: #666666;
		margin-top: 32rpx;
	}
	.btn {
		width: 480rpx;
		height: 88rpx;
		background: #febf4e;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		margin: auto;
		font-size: 28rpx;
		text-align: center;
		font-weight: 500;
		color: #333333;
		line-height: 88rpx;
		margin-top: 32rpx;
	}
}

</style>
